<template>
    <div>
    <p>Home</p>
    <button @click="pushStr">push-字符串-跳转</button>
    <button @click="pushPath">push-路径-跳转</button>
    <button @click="pushName">push-名字-跳转</button>
    <button @click="pushNameParams">push-名字-跳转-传递参数</button>
    <button @click="pushPathQuery">push-路径-跳转-传递参数</button>



  </div>

</template>

<script setup>
import { useRoute, useRouter } from 'vue-router';


const route = useRoute()
const router = useRouter()

console.log('route', route);
console.log('router', router);

const pushStr = ()=>{
  router.push('/about')
}
const pushPath = ()=>{
  router.push({path:'/about'})
}

const pushName = ()=>{
  router.push({name:'about'})
}

const pushNameParams = ()=>{
  router.push({name:'about',state:{params:{name:'tom',avg:'12'}}})
}

const pushPathQuery = ()=>{
  router.push({path:'/about',query:{name:'tom',avg:'12'}})
}
</script>
